//out:../css/
@import './base.less';
@vw: 3.75vw;

body {
  background-color: #f9fafb;
}

// header
header {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 (15/@vw);
  width: 100%;
  height: (50/@vw);
  background-color: #fff;

  .pic {
    width: (235/@vw);
    height: (50/@vw);
    background-image: url(../assets/head.png);
    background-repeat: no-repeat;
    background-size: contain;
  }

  a {
    width: (80/@vw);
    height: (30/@vw);
    background-color: #ffe31b;
    border-radius: (15/@vw);
    font-size: (14/@vw);
    text-align: center;
    line-height: (30/@vw);
  }

}

//search
.search {
  margin-top: (50/@vw);
  height: (52/@vw);
  // background-color: pink;
  padding: (10/@vw) (15/@vw);

  .txt {
    width: (345/@vw);
    height: (32/@vw);
    background-color: #f2f4f5;
    border-radius: (16/@vw);
    text-align: center;
    line-height: (32/@vw);
    font-size: (14/@vw);
    color: #a1a4b3;

    .iconfont {
      font-size: (16/@vw);
    }
  }
}

//banner
.banner {
  height: (108/@vw);
  padding: 0 (15/@vw);
  // background-color: pink;

  ul {
    li {
      width: (345/@vw);
      height: (108/@vw);

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: (5/@vw);
      }
    }
  }
}

//list
.list {
  margin-top: (20/@vw);
  padding: 0 (15/@vw);

  .content {
    ul {
      li {
        display: flex;
        margin-bottom: (16/@vw);
        border-radius: 10px;
        height: (105/@vw);
        background-color: #fff;

        img {
          width: (105/@vw);
          height: (105/@vw);
          border-radius: 10px;
        }

        .txt {
          margin-left: (15/@vw);

          a {
            display: block;
            font-size: (12/@vw);
            color: #a1a4b3;
            line-height: 1.8;
          }

          .more {
            font-size: (14/@vw);
            color: #333;

            .icon-right {
              font-size: (16/@vw);
            }
          }
        }
      }
    }
  }
}

.title {
  margin-bottom: (16/@vw);
  display: flex;
  justify-content: space-between;
  height: (26/@vw);
  line-height: (26/@vw);

  h4 {
    font-size: (20/@vw);
  }

  a {
    font-size: (12/@vw);
    color: #a1a4b3;

  }
}

//recommond
.recommond {
  padding: 0 (15/@vw);

  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    li {
      width: (105/@vw);
      height: (143/@vw);
      margin-bottom: (16/@vw);
      // background-color: pink;

      .pic {
        position: relative;
        width: (105/@vw);
        height: (105/@vw);

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: (10/@vw);
        }

        .cover {
          position: absolute;
          left: 0;
          bottom: 0;
          width: (70/@vw);
          height: (28/@vw);
          background-color: rgba(0, 0, 0, 0.8);
          color: #fff;
          border-radius: 0 10px 0 10px;
          text-align: center;
          line-height: (28/@vw);
        }
      }

      .txt {
        font-size: (14/@vw);
      }
    }
  }
}

//download
.download {
  position: fixed;
  display: flex;
  align-items: center;
  left: (15/@vw);
  bottom: (30/@vw);
  padding: 0 (10/@vw) 0 (15/@vw);
  width: (345/@vw);
  height: (45/@vw);
  background-color: #fff;
  border-radius: (22/@vw);

  img {
    margin: 0 (10/@vw) 0 0;
    width: (36/@vw);
    height: (36/@vw);
  }

  p {
    flex: 1;
    font-size: (14/@vw);
  }

  span {
    width: (32/@vw);
    height: (32/@vw);
    background-color: #f2f3f5;
    border-radius: 50%;
    text-align: center;
    line-height: (32/@vw);
  }
}